<template>
  <view class="shopCart">
    <view class="goods" v-for="(item, index) in shopCartList" :key="index">
      <view class="checked">
        <checkbox-group>
          <u-checkbox
            :value="item.checked"
            shape="circle"
            active-color="red"
            @change="handleChange(index)"
          ></u-checkbox>
        </checkbox-group>
      </view>
      <view class="goodsImg">
        <u-image
          :src="item.goods_big_logo"
          width="191rpx"
          height="191rpx"
        ></u-image>
      </view>
      <view class="goods-info">
        <view class="good-name u-line-2">{{ item.goods_name }}</view>
        <view class="goods-tools">
          <view class="goods-price">￥{{ item.goods_price }}</view>
          <view class="counts">
            <view class="countsIcon" @click="handleNum(index, -1)">-</view>
            <view class="countsNum">{{ item.num }}</view>
            <view class="countsIcon" @click="handleNum(index, 1)">+</view>
          </view>
        </view>
      </view>
    </view>
    <view class="countPrice">
      <view class="checkAll">
        <checkbox-group>
          <u-checkbox
            :value="isCheckAll"
            shape="circle"
            active-color="red"
            @change="handleAll"
            >全选</u-checkbox
          >
        </checkbox-group>
      </view>
      <view class="totalPrice">
        <view>合计：</view>
        <view class="price">￥{{ totalPrice }}</view>
      </view>
      <view class="totalCounts" @click="handlePay"> 去结算（{{ totalCounts }}）</view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["shopCartList"]),
    //全选
    isCheckAll() {
      return (
        this.shopCartList.length &&
        this.shopCartList.every((item) => item.checked)
      );
    },
    //总价
    totalPrice() {
      return this.shopCartList.reduce((sum, item) => {
        if (item.checked) {
          return (sum += item.goods_price * item.num);
        } else {
          return sum;
        }
      }, 0);
    },
    //总数
    totalCounts() {
      return this.shopCartList.reduce((sum, item) => {
        if (item.checked) {
          return (sum += item.num);
        } else {
          return sum;
        }
      }, 0);
    },
  },
  methods: {
    //结算
    handlePay(){
      uni.navigateTo({
        url:'/pages/pay/pay'
      })
    },
    //商品复选框
    handleChange(index) {
      this.shopCartList[index].checked = !this.shopCartList[index].checked;
      this.$store.commit("setShopCart", this.shopCartList);
    },
    //商品加减
   async handleNum(index, val) {
      const shopCartList = [...this.shopCartList];
      if (shopCartList[index].num == 1&&val==-1) {
       const [err,res] =await uni.showModal({
          title:'提示',
          content:'是否确认删除'
        })
        if(res.confirm){
          shopCartList.splice(index,1)
          this.$store.commit("setShopCart", shopCartList);
        }
      } else {
        shopCartList[index].num += val;
        this.$store.commit("setShopCart", shopCartList);
      }
    },
    //控制全选
    handleAll(detail) {
      this.shopCartList.forEach((item) => (item.checked = detail.value));
      this.$store.commit("setShopCart", this.shopCartList);
    },
  },
};
</script>

<style lang="scss" scoped>
.shopCart {
  padding-bottom: 83rpx;
}
.goods {
  display: flex;
  align-items: center;
  padding: 25rpx;
  .checked {
    flex: 1;
  }

  .goodsImg {
    flex: 2;
  }

  .goods-info {
    flex: 4;
    .good-name {
    }

    .goods-tools {
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;
      .goods-price {
        color: $themeColor;
      }

      .counts {
        height: 32rpx;
        display: flex;
        color: #666;
        .countsIcon {
          width: 32rpx;
          height: 32rpx;
          line-height: 32rpx;
          font-size:22rpx;
          text-align: center;
          border-radius: 50%;
          border: 1rpx solid #666;
        }
        .countsNum {
          flex: 1;
          margin: 0 20rpx;
        }
      }
    }
  }
}

.countPrice {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  height: 83rpx;
  padding: 0 20rpx;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-top: 2rpx solid #eee;
  .checkAll {
  }

  .totalPrice {
    flex: 1;
    display: flex;
    margin-left: 30rpx;

    .price {
      color: $themeColor;
    }
  }

  .totalCounts {
    width: 150rpx;
    height: 52rpx;
    line-height: 52rpx;
    text-align: center;
    border-radius: 26rpx;
    background-color: $themeColor;
    font-size: 20rpx;
    color: #fff;
  }
}
</style>